<template>
  <view class="feedback-page">
    <view class="page-header">
      <text class="title">反馈</text>
    </view>

    <view class="feedback-form">
      <view class="form-item">
        <text class="label">反馈类型</text>
        <radio-group class="radio-group" @change="onTypeChange">
          <label class="radio-label" v-for="type in feedbackTypes" :key="type.value">
            <radio :value="type.value" :checked="feedbackType === type.value" color="#ff7d00"/>
            <text class="radio-text">{{ type.label }}</text>
          </label>
        </radio-group>
      </view>

      <view class="form-item">
        <text class="label">反馈内容</text>
        <textarea class="content-input" v-model="feedbackContent" placeholder="请输入具体反馈内容（必填）" auto-height maxlength="500"></textarea>
        <text class="input-tip">{{ feedbackContent.length }}/500</text>
      </view>

      <view class="form-item">
        <text class="label">上传截图（可选）</text>
        <view class="image-upload">
          <view class="image-item" v-for="(img, index) in uploadImages" :key="index">
            <image :src="img" mode="aspectFill" class="preview-img" @click="previewImage(index)"></image>
            <view class="delete-btn" @click="deleteImage(index)">
              <wd-icon name="close" size="20px" color="#ff4d4f"></wd-icon>
            </view>
          </view>

          <view class="upload-btn" @click="chooseImage" v-if="uploadImages.length < maxImageCount">
            <wd-icon name="add" size="24px" color="#999"></wd-icon>
            <text class="upload-tip">添加图片</text>
          </view>
        </view>
        <text class="image-tip">最多上传{{ maxImageCount }}张图片（每张≤2MB）</text>
      </view>

      <view class="submit-btn" @click="handleSubmit">
        <text class="btn-text">提交反馈</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const feedbackTypes = ref([
  { value: 'feature', label: '功能建议' },
  { value: 'bug', label: 'BUG反馈' },
  { value: 'service', label: '服务问题' },
  { value: 'other', label: '其他问题' }
])

const feedbackType = ref('feature')
const feedbackContent = ref('')
const uploadImages = ref([])
const maxImageCount = ref(3)
const maxImageSize = 2 * 1024 * 1024 // 2MB

const inputTip = computed(() => `${feedbackContent.value.length}/500`)

const onTypeChange = (e) => {
  feedbackType.value = e.detail.value
}

const chooseImage = async () => {
  try {
    const res = await uni.chooseImage({
      count: maxImageCount.value - uploadImages.value.length,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera']
    })

    const validImages = []
    for (const temp of res.tempFilePaths) {
      const fileSize = await getFileSize(temp)
      if (fileSize > maxImageSize) {
        uni.showToast({ title: '图片大小不能超过2MB', icon: 'none' })
        continue
      }
      validImages.push(temp)
    }

    uploadImages.value = [...uploadImages.value, ...validImages]
  } catch (err) {
    console.error('选择图片失败:', err)
  }
}

const getFileSize = (filePath) => {
  return new Promise((resolve) => {
    uni.getFileInfo({
      filePath,
      success: (res) => resolve(res.size),
      fail: () => resolve(0)
    })
  })
}

const deleteImage = (index) => {
  uploadImages.value.splice(index, 1)
}

const previewImage = (index) => {
  uni.previewImage({
    current: index,
    urls: uploadImages.value
  })
}

const validateForm = () => {
  if (!feedbackContent.value.trim()) {
    uni.showToast({ title: '请填写反馈内容', icon: 'none' })
    return false
  }
  return true
}

const handleSubmit = async () => {
  if (!validateForm()) return

  const formData = {
    type: feedbackType.value,
    content: feedbackContent.value.trim(),
    images: uploadImages.value
  }

  try {
    // 模拟接口请求（实际替换为 uni.request）
    await new Promise(resolve => setTimeout(resolve, 1500))
    
    uni.showToast({ title: '提交成功', icon: 'success' })
    feedbackContent.value = ''
    uploadImages.value = []
    feedbackType.value = 'feature'
  } catch (err) {
    uni.showToast({ title: '提交失败，请重试', icon: 'none' })
    console.error('提交失败:', err)
  }
}
</script>

<style lang="less" scoped>
	@import '@/static/styles/colors.less';
	
.feedback-page {
  padding: 32rpx 24rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 40rpx;
  
  .title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.5rpx;
  }
}

.feedback-form {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.form-item {
  margin-bottom: 40rpx;
  
  .label {
    display: block;
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 16rpx;
  }
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 12rpx;
  cursor: pointer;
}

.radio-text {
  font-size: 28rpx;
  color: #333;
}

.content-input {
  width: 100%;
  min-height: 160rpx;
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  padding: 16rpx;
  box-sizing: border-box;
  transition: border-color 0.2s;
  
  &:focus {
    border-color: @color-primary;
    outline: none;
  }
}

.input-tip {
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
  text-align: right;
}

.image-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.image-item {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  border-radius: 8rpx;
  overflow: hidden;
}

.preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delete-btn {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-btn {
  width: 200rpx;
  height: 200rpx;
  border: 1rpx dashed #ddd;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  cursor: pointer;
  transition: all 0.2s;
  
  &:active {
    border-color: @color-primary;
    color: @color-primary;
  }
}

.upload-tip {
  font-size: 24rpx;
  margin-top: 8rpx;
}

.image-tip {
  font-size: 24rpx;
  color: #999;
  margin-top: 16rpx;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  background: @color-primary;
  border-radius: 44rpx;
  margin-top: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  
  &:active {
    background: @color-primary;
    transform: scale(0.98);
  }
}

.btn-text {
  font-size: 32rpx;
  color: #fff;
  font-weight: 500;
}
</style>